<template>
  <div style="margin-right: 20px">
    <slot name="title"></slot>
    <el-form
      ref="formRef"
      class="m7-form"
      :disabled="onlyReade"
      :model="formData"
      :rules="rules"
      label-position="top"
    >
      <el-form-item
        :label="item.name"
        v-for="(item, index) in formFields"
        :key="index"
        :prop="item.field"
      >
        <input-type
          :onlyReade="onlyReade"
          :propData="item"
          :propValue="formData[item.field]"
          @updatePropValue="updatePropValue"
        ></input-type>
      </el-form-item>
    </el-form>
    <slot name="btn"></slot>
  </div>
</template>

<script lang="ts">
/**
 * 渲染客户录入表单组件
 * 设置数据 serData(setForm:传入表单， setfields：表单类型以及配置，setRules：校验配置) 可以在data.ts查看数据格式
 * 校验数据 checkForm status 如果为true 校验通过，表单数据会传回
 */
import { Component, Vue, Ref, Prop } from 'vue-property-decorator'
import InputType from '../common/inputType.vue'
import { checkHideTel } from '@/utils/common'
@Component({
  name: 'CustomerForm',
  components: { InputType }
})
export default class CustomerForm extends Vue {
  @Ref() private readonly formRef
  @Prop({ default: () => false }) private onlyReade
  private formData: any = {}
  private formFields: any = []
  private rules: any = {}

  private checkForm () {
    let status = false
    this.formRef.validate(valid => {
      if (valid) {
        status = true
      }
    })
    return {
      status,
      newForm: this.formData
    }
  }

  private updatePropValue (val: any, field: any) {
    this.$set(this.formData, field, val)
  }

  public clearData () {
    this.formData = {}
    this.$nextTick(() => {
      if (this.formRef) {
        this.formRef.clearValidate()
      }
    })
  }

  public updatePhone (phone) { // 更新手机号,通话模块会默认把手机号带进去
    this.formFields.map(item => {
      if (item.field === 'mobile') { // 手机号加密
        phone.forEach(item2 => {
          item2.bakValue = item2.value
          item2.value = checkHideTel(item2.value)
        })
        this.$set(this.formData, item.field, phone)
      }
    })
  }

  public setData (data: any, rules: any, detailData?: any) {
    this.formFields = data
    this.rules = rules
    this.formFields.map(item => {
      if (['radio', 'dropdown'].includes(item.type) && item.choices) {
        item.choices.map(v => {
          if (v.isDefault) {
            this.$set(this.formData, item.field, item.type === 'dropdown' ? [v.key] : v.key)
          }
        })
      } else if (['checkbox'].includes(item.type) && item.choices) {
        const checkArr: any = []
        item.choices.map(v => {
          if (v.isDefault) {
            checkArr.push(v.key)
          }
        })
        this.$set(this.formData, item.field, checkArr)
      }
      if (detailData) { // 详情的回显
        if (detailData[item.field]) { // 详情返回的数据中存在的字段
          if (['other'].includes(item.type) && detailData[item.field] && !detailData[item.field].length) { // 详情返回为[]
            this.$set(this.formData, item.field, [{}])
          } else {
            if (item.field === 'mobile' && detailData[item.field]) { // 手机号加密
              detailData[item.field].forEach(item2 => {
                item2.bakValue = item2.value
                item2.value = checkHideTel(item2.value)
              })
            }
            this.$set(this.formData, item.field, detailData[item.field])
          }
        } else { // 详情返回的数据中不存在但是详情面板中存在的字段
          if (['other'].includes(item.type)) {
            this.$set(this.formData, item.field, [{}])
          } else if (['checkbox', 'cascade', 'date-range', 'datetime-range', 'attachment', 'dropdown'].includes(item.type)) {
            this.$set(this.formData, item.field, [])
          } else if (['age'].includes(item.field)) {
            this.$set(this.formData, item.field, undefined)
          } else {
            this.$set(this.formData, item.field, '')
          }
        }
      }
    })
  }
}
</script>

<style lang="stylus" scoped></style>
